let { table, $,form,layer,upload } = layui;
export default class Student{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tools">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                <div class="layui-input-inline type">
                <select name="type" >
                    <option value="name">姓名</option>
                    <option value="gender">性别</option>
                    <option value="age">年龄</option>
                </select>
              </div>
              <div class="layui-input-inline value">
                  <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
              </div>
              <div class="layui-input-inline">
                  <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                      <i class="layui-icon">&#xe615;</i>
                  </button>
              </div>
            </div>
            </form>
        </script>
        <script type="text/html" id="studentBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        `;
        $("#content").html(template);
    }
    handle(){
        table.render({
            elem: "#studentTable",
            url: "/students", //数据接口
            toolbar: "#tools",
            page: true, //开启分页
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            },
            limit:3,
            limits:[3,5,10,15,20],
            cols: [
                [
                    //表头
                    {
                        field: "name",
                        title: "姓名",
                    },
                    {
                        field: "gender",
                        title: "性别",
                    },
                    { field: "age", title: "年龄" },
                    { field: "classes", title: "所属班级",
                        templet: function(d){
                            return d.classes ? d.classes.name : ''
                        }
                    },
                    {fixed: 'right', width:150, align:'center', toolbar: '#studentBar'}
                ],
            ],
            
        });
        let headImg = "";
        table.on('toolbar(studentTable)',function(obj){
            if(obj.event == "add"){
                layer.open({
                    type:1,
                    title:'增加学生',
                    btn:['确定','取消'],
                    yes:function(index){     
                        console.log(form.val('addForm'));
                        $.ajax({
                            type:"post",
                            url:"/students",
                            data:{
                                headImg
                                ,...form.val('addForm')},
                            success(){
                                table.reload("studentTable");
                                layer.close(index);
                            }
                        });
                        
                    },
                    success:function(){
                       
                        $.ajax({
                            type:"get",
                            url:"/classes/all",
                            success(res){
                                console.log("res",res)
                                $("[name=classes]").html(res.map(item => `<option value="item._id">${item.name}</option>` ))
                                form.render();
                                upload.render({
                                    elem: '#uploadBtn'
                                    ,url: '/upload'
                                    ,done: function(res, index, upload){ //上传后的回调
                                        console.log(res);
                                        $("#uploadImg").attr("src","/images/"+res.filename)
                                        headImg = res.filename;
                                    } 
                                    //,accept: 'file' //允许上传的文件类型
                                    //,size: 50 //最大允许上传的文件大小
                                    //,……
                                })
                            }
                        });
                    },
                    content:`
                    <form class="layui-form" lay-filter="addForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传头像</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="uploadBtn">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg" width="80" height="90">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="name"
                                required
                                lay-verify="required"
                                placeholder="请输入姓名"
                                autocomplete="off"
                                class="layui-input"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="age"
                                required
                                lay-verify="required"
                                placeholder="请输入年龄"
                                autocomplete="off"
                                class="layui-input"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                        <input type="radio" name="gender" value="男" title="男">
                        <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">所属班级</label>
                    <div class="layui-input-block">
                        <select name="classes">
                            
                        </select>
                    </div>
                </div>
                </form>
                    `
                });
            }
            else if(obj.event == "search"){
                console.log(form.val('searchForm'));
                table.reload('studentTable',{
                    where:form.val('searchForm'),
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        });
      
        table.on('tool(studentTable)',function(obj){
            console.log(obj);
            if(obj.event == 'del'){
                // 删除学生
                layer.confirm('是否删除？',function(index){
                    $.ajax({
                        type:"delete",
                        url:'/students/' + obj.data._id,
                        success(){
                            table.reload('studentTable');
                            layer.close(index);
                        }
                    });
                    
                });
            }
            else if(obj.event == 'edit'){
                layer.open({
                    type:1,
                    title:'修改学生',
                    btn:['确定','取消'],
                    yes:function(index){     
                        $.ajax({
                            type:"put",
                            url:"/students/"+obj.data._id,
                            data:{
                                ...form.val('updateForm')
                            },
                            success(){
                                table.reload("studentTable");
                                layer.close(index);
                            }
                        });
                        
                    },
                    success:function(){
                        form.render();
                        $.ajax({
                            type:"get",
                            url:"/students/"+obj.data._id,
                            success(res){
                                form.val('updateForm',res);
                            }
                        });
                    },
                    content:`
                    <form class="layui-form" lay-filter="updateForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="name"
                                required
                                lay-verify="required"
                                placeholder="请输入姓名"
                                autocomplete="off"
                                class="layui-input"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="age"
                                required
                                lay-verify="required"
                                placeholder="请输入年龄"
                                autocomplete="off"
                                class="layui-input"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                        <input type="radio" name="gender" value="男" title="男">
                        <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>
                </form>
                    `
                });
            }
        });
    }

}